<template>
  <UseDark v-slot="{ isDark }">
    <div class="left-nav-box">
      <nav :class="['left-nav', { dark: isDark, light: !isDark }]">
        <div class="avatar">
          <div class="avatar-wrapper">
            <!-- <jc-icon name="jcstudio" /> -->
            <img src="/public/jacklee.jpg" />
          </div>
        </div>
        <!-- 各选项标签 -->
        <div
          v-for="(item, index) in datas"
          :key="index"
          :class="[
            'nav-item',
            {
              dark: isDark,
              light: !isDark,
              selected: index === selectIndex
            }
          ]"
          @click="
            ($event) => {
              selectIndex = index
            }
          "
        >
          <jc-icon class="nav-item-icon" :name="item.icon" />
          <span class="nav-item-text">{{ item.title }}</span>
        </div>
      </nav>
      <slot :name="thatSlot.name"></slot>
    </div>
  </UseDark>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import type { Ref } from 'vue'
import UseDark from '@/apps/dark/UseDark.vue'

// const props = defineProps<{
//   datas: { name:string, title:string, icon:string }[]
// }>()

// https://cn.vuejs.org/guide/typescript/composition-api.html#props-default-values
type rec = { name: string; title: string; icon: string }
export interface Props {
  datas: rec[]
}

const props = withDefaults(defineProps<Props>(), {
  datas: () => []
})

const selectIndex: Ref<number> = ref(0)

// 借用计算属性算出当前的 slot 名，它是当前选项卡选择的那条数据对应的name
const thatSlot = computed(() => {
  return props.datas.filter((value, index) => {
    if (index === selectIndex.value) {
      return value
    }
  })[0]
})
</script>

<style lang="scss" scoped>
.left-nav-box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  user-select: none;
  // 用户头像
  .avatar {
    width: 100%;
    height: 52px;
    display: grid;
    place-content: center;

    /* background-color: antiquewhite; */
    .avatar-wrapper {
      width: 39px;
      height: 39px;
      font-size: 36px;
      display: grid;
      place-content: center;
      img {
        width: 36px;
        height: 36px;
      }
    }
  }
  // 标签导航
  nav.left-nav {
    width: 52px;
    height: 100%;
    max-width: 52px;
    min-width: 52px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    &.light {
      background-color: #e8f9f1;
    }

    &.dark {
      background-color: rgb(80, 80, 80);
    }

    .nav-item {
      display: grid;
      place-content: center;
      width: 100%;
      height: 50px;
      cursor: pointer;

      &.light {
        $light-bg: rgb(226, 226, 226);
        color: #000000;
        &.selected {
          color: #000000;
          background-color: rgb(255, 255, 255);
        }

        &:hover {
          color: #000000;
          background-color: rgb(237, 255, 187);
        }
        /* &:active {
          background-color: rgb(255, 145, 0);
        } */
      }

      &.dark {
        $light-bg: rgb(226, 226, 226);
        color: #ffffff;
        &.selected {
          background-color: rgb(173, 173, 173);
        }

        &:hover {
          color: #000000;
          background-color: rgb(175, 216, 213);
        }
        &:active {
          background-color: rgb(163, 140, 109);
        }
      }

      .nav-item-icon {
        text-align: center;
        font-size: 26px;
      }

      .nav-item-text {
        width: 100%;
        text-align: center;
        font-size: 12px;
      }
    }
  }
  .right-slot {
    height: 100%;
    width: 100%;
  }
}
</style>
